import React from 'react';
import { Carousel } from 'antd';
import { getData } from "@/api/commonApi";
class CarouselCom extends React.Component<any, any>{
    constructor(props: any) {
        super(props);
        this.state = {
            page: "走马灯",
            currentC: null,
            begAnimation: false,
            bannerData: [{
                title: "1",
                desc: []
            }, {
                title: "2",
                desc: []
            }, {
                title: "3",
                desc: []
            }],
        };

    }

    componentDidMount() {
        this.afterChange(0);
        this.getBannerData();
    }

    // 走马灯切换
    afterChange(current: any) {
        this.setState({
            currentC: current,
            begAnimation: false,
        })
        setTimeout(() => {
            this.setState({
                begAnimation: true,
            })
        }, 700)
    }

    // 获取数据
    async getBannerData() {
        let res: any = await getData('homeBannerData');
        if (!res) {
            return false;
        }
        if (res.data.length === 0) {
            return
        }
        this.setState({
            bannerData: res.data
        })
    }

    // 获取list
    getDescP(data: any) {
        return data.map((item: any, inx: number) => {
            return (
                <p className={`c-o-p ${this.state.begAnimation ? 'go-animation' : ''}`} key={inx}>
                    {item.p}
                </p>
            )
        })
    }
    render() {
        return (
            <div className="i7b-home-carousel">
                <Carousel autoplay afterChange={this.afterChange.bind(this)}>
                    <div className="c-one">
                        <div className={`content ${this.state.currentC === 0 ? 'go-animation' : ''}`}>
                            <h3 className="c-o-h">
                                {this.state.bannerData[0].title}
                            </h3>
                            {this.getDescP(this.state.bannerData[0].desc)}
                        </div>
                    </div>
                    <div className="c-two">
                        <div className={`content ${this.state.currentC === 1 ? 'go-animation' : ''}`}>
                            <h3 className="c-o-h">
                                {this.state.bannerData[1].title}
                            </h3>
                            {this.getDescP(this.state.bannerData[1].desc)}
                        </div>
                    </div>
                    <div className="c-three">
                        <div className={`content ${this.state.currentC === 2 ? 'go-animation' : ''}`}>
                            <h3 className="c-o-h">
                                {this.state.bannerData[2].title}
                            </h3>
                            {this.getDescP(this.state.bannerData[2].desc)}
                        </div>
                    </div>
                </Carousel>
                <div className="hudun">
                    <div className="hudun-c common-width">
                        <ul>
                            <li>
                                <span>
                                    总清洗峰值
                                </span>
                                <span>
                                    1177GB
                                </span>
                            </li>
                            <li>
                                <span>
                                    总CC攻击拦截
                                </span>
                                <span>
                                    41247050次
                                </span>
                            </li>
                            <li>
                                <span>
                                    总攻击溯源
                                </span>
                                <span>
                                    2063次
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        )
    }
}

export default CarouselCom;